<template>
<button v-on:click="f1">测试1</button><br>
<!-- 简写方式,可以使用@代替v-on: -->
<button @click="f2">测试2</button><br>
<button @click="f3('Hello World')">测试3</button><br>
<!-- 
    获取用户输入的数据
    $event.target.value用于获取输入框的数据
-->
<input type="text" @input="f4($event.target.value)">
<p>{{ msg }}</p>
<button @click="f5">更改msg的值</button><br>
<!-- 简写方式 -->
<button @click="msg = 'Welcome To Vue'">更改msg的值</button>
</template>
<script setup>
import { ref } from 'vue';
const msg = ref("Hello Vue")
function f1(){
    console.log("正在执行f1方法");
}

function f2(){
    console.log("正在执行f2方法");
}

function f3(args){
    console.log(args)
}
function f4(args){
    console.log(args)
}
function f5(){
    msg.value = "Hello Wolrd";
}
</script>